<template>
   <div>
     <text class="title_text">{{title}}</text>
     <div class="text_dis">
       <text class="text_dis1">{{dis}}</text>
       <text class="text_dis1"> > </text>
       <text class="text_dis1">{{aim}}</text>
     </div>
     <text class="shop_title">商品规格</text>
     <div class="data1" v-for="( index,item ) in list1" :key="index.item">
       <text class="data2">{{index.name}}</text>
       <text class="data3">{{index.datr}}</text>
     </div>
     <text class="goods_dis">商品描述</text>
     <text class="dis">{{discribe}}</text>
     <image :src="index.src" class="dis_image" v-for="( index,item) in list2" :key="index.item"></image>
   </div>
</template>
<style scoped>
   .title_text{
      width: 100%;
      height: 15px;
      line-height: 15px;
      font-size: 15px;
      color: #33c179;
      margin-top: 20px;
      padding-left: 12px;
   }
   .dis_image{
      width: 307px;
      height: 318px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
   }
   .data1{
      width: 329px;
      height: 30px;
      flex-direction: row;
      margin-left: auto;
      margin-right: auto;
   }
   .data2{
      width: 135px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      color: #333;
      border: solid 1px #cbc8c8;
   }
   .dis{
      width: 100%;
      padding-left: 12px;
      padding-right: 12px;
      margin-top: 21px;
      font-size: 14px;
      color: #666;
      overflow: scroll;
   }
   .data3{
      width: 193px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 15px;
      /*font-weight: bold;*/
      color: #333;
      border: solid 1px #cbc8c8;
   }
   .shop_title{
      width: 100%;
      height: 15px;
      line-height: 15px;
      font-size: 15px;
      color: #33c179;
      margin-top: 30px;
      padding-left: 12px;
      margin-bottom: 11px;
   }
   .goods_dis{
      width: 100%;
      height: 15px;
      line-height: 15px;
      font-size: 15px;
      color: #33c179;
      padding-left: 12px; 
      margin-top: 30px;
   }
   .text_dis{
      width: 100%;
      height: 14px;
      padding-left: 12px;
      flex-direction: row; 
      margin-top: 20px;
   }
   .text_dis1{
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      color: #666;
   }
</style>
<script>
export default {
    data () {
        return {
           title: '商品类别',
           dis: '情趣用品',
           aim: '成人',
           list1: [
              {
                name: '品牌',
                datr: '菲利普斯--琛琛'
              },
               {
                name: '价钱',
                datr: '52.1'
              },
               {
                name: '适用人群',
                datr: '18-52周岁'
              },
               {
                name: '不适症状',
                datr: '可能会发生轻微过敏'
              },
               {
                name: '那咋办',
                datr: '继续花钱'
              },
               {
                name: '心碎',
                datr: '应该如何去收场'
              },
           ],
           discribe: '爱过以后只留下一道伤口 你曾经对我说的天长地久 随着你转身远走都化作乌有 该不该就这样放手 什么原因让你一去不回头 缠绵的伤口不停地颤抖 为什么不能挽留 从前的温柔 有情的一切换无情的所有',
           list2: [
              {
                src: 'http://192.168.2.123:8080/img/timg.jpg',
              },
              {
                src: 'http://192.168.2.123:8080/img/timg.jpg',
              }
           ]
        }
    },
    methods: {
       
    }
}
</script>
